<template>
  <div class="boxshow phone_news" v-if="partListCon">
    <modueltitle :info="partListCon"></modueltitle>
    <div class="fx hotel_show" v-for="(hotel,i) in hotelList" :key="i">
      <img :src="$fnc.getImgUrl(hotel.img)" />
      <div class="fx">
        <p>{{hotel.title}}</p>
        <p>
          <span>{{hotel.score || 0}}分</span>
          {{hotel.score_number || 0}}条评论
        </p>
        <p>{{hotel.province+hotel.city+hotel.area+hotel.town+hotel.address}}</p>
        <p class="fx">
          <span>距您3公里</span>
          <span>￥345起</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import modueltitle from "@/components/page/module/module_center/module_title_show";
export default {
  data() {
    return {
      hotelList: []
    };
  },
  components: {
    modueltitle
  },
  props: {
    index: {
      type: Number,
      default: -1
    }
  },
  computed: {
    ...mapState({
      active: state => state.modulePage.active,
      bannerNowIndex: state => state.modulePage.bannerNowIndex || 0,
      allbanner: state => state.modulePage.allbanner,
      partListCon() {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      }
    })
  },
  created() {
    this.getHotelList();
  },
  mounted() {},
  methods: {
    getHotelList() {
      this.$api.getHotel.hotel_is_home_lists().then(res => {
        if (res.data.code == 200) {
          this.hotelList = res.data.result;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.boxshow {
  width: 100%;
}
.phone_news {
  border: 1px solid transparent;
  background: #fff;
  margin: 10px 0;
}
.hotel_show {
  width: 100%;
  padding: 5px 12px;
  margin-bottom: 10px;
  justify-content: flex-start;
  font-size: 14px;
  img {
    width: 90px;
    margin-right: 10px;
    border-radius: 5px 0 5px 0;
  }
  > div {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    > p {
      width: 100%;
      padding-bottom: 6px;
      &:nth-of-type(1) {
        font-size: 16px;
        color: #222222;
        font-weight: bold;
      }
      &:nth-of-type(2) {
        > span {
          background: #ffdd00;
          padding: 2px 10px;
          border-radius: 5px 0 5px 0;
          margin-right: 6px;
        }
      }
      &:nth-of-type(3) {
        overflow: hidden;
      }
      &:nth-of-type(4) {
        color: #bcbcbc;
        justify-content: flex-end;
        > span {
          width: 50%;
          &:nth-of-type(2) {
            color: #ffaa01;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
